import Vue from 'vue'
import LoadingComponent from './loading.vue'

const Loading = {}
let showLoading = false // 存储loading显示状态
let loadingNode = null // 存储loading节点元素
const LoadingConstructor = Vue.extend(LoadingComponent)

// eslint-disable-next-line no-shadow
Loading.install = Vue => {
  Vue.prototype.$loading = function (tips, type) {
    if (type === 'hide') {
      // eslint-disable-next-line no-multi-assign
      loadingNode.isShowLoading = showLoading = false
    } else {
      if (showLoading) {
        // 如果loading还在，则不再执行
        return
      }
      loadingNode = new LoadingConstructor({
        data: {
          isShowLoading: showLoading,
          content: tips
        }
      })
      loadingNode.$mount() // 挂在实例，为了获取下面的loadingNode.$el
      document.body.appendChild(loadingNode.$el)
      // eslint-disable-next-line no-multi-assign
      loadingNode.isShowLoading = showLoading = true
    }
  };

  ['show', 'hide'].forEach((type) => {
    Vue.prototype.$loading[type] = function (tips) {
      return Vue.prototype.$loading(tips, type)
    }
  })
}

export default Loading

// 引用
// import Loading from './components/common/global/loading'
// Vue.use(Loading)
// 在要用的地方this.$loading.show('hello world')、 this.$loading.hide()
